<template>
    <div class="banxin">
        <el-breadcrumb separator="/" style="padding: 20px 0;">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/list' }">文章列表</el-breadcrumb-item>
            <el-breadcrumb-item>文章内容预览</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="aricle">
            <div class="top">
                <h2 class="title">{{ article.title }}</h2>
                <h4 class="subTitle">（副标题：{{ article.subTitle }}）</h4>
                <el-row>
                    <el-col :span="12">作者：{{ article.author }}</el-col>
                    <el-col :span="12">日期：{{ article.date }}</el-col>
                </el-row>
            </div>
            <div class="down" v-html="article.content"></div>
        </div>
    </div>
</template>

<script setup>
import { onMounted, ref, getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance()
import { detailApi } from '../request/api'
import moment from 'moment'

const article = ref({})

onMounted(() => {
    // 获取路由中的id，这个生命周期没有this，因此不能用this获取路由
    detailApi({
        id: proxy.$route.params.id
    }).then(res => {
        if (res.errCode === 0) {
            res.data.date = moment(res.data.date).format('YYYY-MM-DD');
            article.value = res.data;
        }
    })
})
</script>

<style scoped lang='less'>
.aricle {
    .top {
        padding-top: 20px;
        padding-bottom: 20px;
        border-bottom: 1px solid #ccc;
        .title {
            font-weight: bold;
            text-align: center;
            font-size: 30px;
            margin-bottom: 30px;
        }
        .subTitle {
            text-align: center;
            font-size: 20px;
            margin-bottom: 30px;
        }
        .el-col {
            &:last-child {
                text-align: right;
            }
        }
    }
    /deep/.down {
        p {
            line-height: 2;
            text-indent: 2em;
            font-size: 16px;
            strong {
                font-weight: bold;
            }
            img {
                display: block;
                margin: auto;
            }
        }
        pre {
            user-select: none;
            padding: 0 2em;
            box-sizing: border-box;
            code {
                user-select: none;
                xmp {
                    color: #fff;
                    padding-top: 10px;
                    padding-bottom: 10px;
                    padding-left: 2em;
                    padding-right: 2em;
                    background: #333;
                }
            }
        }
    }
}
</style>